import React, { useState } from 'react';

// 是用来解析 MD 语法用的
import MarkdownIt from 'markdown-it';
// 用来编辑 MD 的组件
import MdEditor from 'react-markdown-editor-lite';
// import style manually
import 'react-markdown-editor-lite/lib/index.css';
import { Button } from 'antd';



const Md = () => {
  // 创建解析器，用来做 MD 的解析用的
const mdParser = new MarkdownIt(/* Markdown-it options */);

  const [htmlStr, setHtmlStr] = useState()

// 输入内容后的回调函数
function handleEditorChange({ html, text }) {
  // console.log('handleEditorChange', html, text);
  setHtmlStr(html)
}

  return (
    <div>
      <h3>MD编辑器</h3>
      <MdEditor style={{ height: '300px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} />
      <Button onClick={()=>{
        console.log(htmlStr);
      }}>点击获取</Button>
      <div dangerouslySetInnerHTML={{__html:htmlStr}}></div>
    </div>
  );
};

export default Md;
